<!-- 费用支出-->
<template>
    <div class="contenBox">
        <div class="leftTree">
           <el-tree
            :data="classifyTreeList"
            :highlight-current="true"
          ></el-tree>
        </div>
        <div class="rightContent">
            <div class="rightTop">
                <el-card class="box-card">
                    <el-form
                        ref="form"
                        :model="formSearch"
                        label-width="43px"
                        :inline="true"
                    >
                        <el-form-item label="姓名">
                        <el-input
                            v-model="formSearch.studentName"
                            placeholder="请输入姓名"
                            style="width:120px"
                        ></el-input>
                        </el-form-item>
                        <el-form-item label="学年">
                            <el-input
                                v-model="formSearch.schoolYear"
                                placeholder="请输入学年"
                                style="width:120px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="学号">
                            <el-input
                                v-model="formSearch.studentIds"
                                placeholder="请输入学号"
                                style="width:120px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="支付方式" label-width="80px">
                        <el-select
                            class="select"
                            v-model="formSearch.subject"
                            placeholder="支付方式"
                            style="width:120px"
                        >
                            <el-option
                            v-for="item in payment"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item>
                        <el-button type="primary" size="small" @click="search">
                            <span
                            class="icon iconfont icon-chaxun"
                            style="font-size: 12px; font-weight: bold"
                            >查询</span
                            >
                        </el-button>
                        <el-button size="small" @click="reset" icon="el-icon-refresh"
                            >重置</el-button
                        >
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div class="rightBottom">
                <el-card class="box-card">
                    <el-button type="primary" @click="add">添加</el-button>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="60"> </el-table-column>
                        <el-table-column prop="name" label="姓名" width="70" > </el-table-column>
                        <el-table-column prop="schoolYear" label="学年"> </el-table-column>
                        <el-table-column prop="studentId" label="学号" width="80"> </el-table-column>
                        <el-table-column prop="certificate" label="证件号" width="100"> </el-table-column>
                        <el-table-column prop="payment" label="支付方式"> </el-table-column>
                        <el-table-column
                            label="操作"
                            width="120">
                            <template>
                                <span class="icon iconfont icon-bianji"></span>
                                <span class="icon iconfont icon-zhifu"></span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.pageNum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
import { getClassifyTreeListApi } from "@/api/basics/classify";
export default {
  data() {
    return {
      // 左侧树模拟数据
      //   treeData: [],
      //   defaultProps: {
      //     children: "children",
      //     label: "label"
      //   },
      //搜索
      formSearch: {},
      //表格数据
      tableData: [
        {
          id: 1,
          name: "王楠",
          schoolYear: "2012学年",
          studentId: "121231",
          certificate: "3121254255411",
          payment: "线上支付"
        },
        {
          id: 2,
          name: "田佳鑫",
          schoolYear: "2013学年",
          studentId: "2511512",
          certificate: "56415321112",
          payment: "线下支付"
        },
        {
          id: 3,
          name: "张磊",
          schoolYear: "2014学年",
          studentId: "5218451",
          certificate: "3121254255411",
          payment: "线上支付"
        },
        {
          id: 4,
          name: "田晓",
          schoolYear: "2022学年",
          studentId: "8554551",
          certificate: "3121254255411",
          payment: "线下支付"
        },
        {
          id: 5,
          name: "张英",
          schoolYear: "2021学年",
          studentId: "8415148",
          certificate: "56415321112",
          payment: "线下支付"
        },
        {
          id: 6,
          name: "张鑫",
          schoolYear: "2012学年",
          studentId: "121231",
          certificate: "3121254255411",
          payment: "线上支付"
        },
        {
          id: 7,
          name: "赵天",
          schoolYear: "2013学年",
          studentId: "121231",
          certificate: "3121254255411",
          payment: "线下支付"
        },
        {
          id: 8,
          name: "赵斌",
          schoolYear: "2014学年",
          studentId: "121231",
          certificate: "56415321112",
          payment: "线上支付"
        },
        {
          id: 9,
          name: "王东",
          schoolYear: "2025学年",
          studentId: "121231",
          certificate: "3121254255411",
          payment: "线下支付"
        },
        {
          id: 10,
          name: "邹诗函",
          schoolYear: "2036学年",
          studentId: "121231",
          certificate: "56415321112",
          payment: "线上支付"
        }
      ],
      //分页
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0, //总条数,
      sex: [],
      payment: [{ id: 1, label: "线上支付" }, { id: 2, label: "线下支付" }],
      classifyTreeList: [],
    };
  },
  mounted() {
    getClassifyTreeListApi().then(res => {
      // console.log(res);
      this.sex = res.data[0].children;
      this.classifyTreeList = Array(res.data[2]);
    });
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      //   this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      //   this.getList()
    },
    reset() {
      this.formSearch = {};
    },
    search() {},
    add(){
      this.$router.push({
        path:'/Finance/Addexpense'
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  // min-width: calc(100vh - 200px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    // height: 100%;
    // overflow-y: auto;
    // min-height:calc(100vh - 95px);
    background-color: #fff;
    // padding: 15px 15px;
    border-radius: 5px;
    box-sizing: border-box;

    // .tac{
    //   width: 300px;

    //   ::v-deep .el-col-12{
    //     min-height:calc(100vh - 220px);
    //     height: 500px;
    //     overflow-y: auto;
    ::v-deep .el-tree {
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }

    // ::v-deep .el-submenu.is-active .el-submenu__title {
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu .el-menu-item {
    //   height: 40px;
    //   line-height: 40px;
    // }

    // ::v-deep .el-menu-item.is-active {
    //   border-right: solid 2px #409eff;
    // }

    // ::v-deep .el-submenu__icon-arrow {
    //   transform: rotateZ(-90deg);
    //   font-size: 16px;
    // }

    // ::v-deep .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    //   transform: rotateZ(0deg);
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu.is-opened .el-submenu__title {
    //   color: #409eff;
    // }
  }

  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    // width: 100%;
    margin-left: 15px;
    padding-right: 10px;
    // background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      width: 100%;
      .el-card {
        height: 100%;
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      // height: 400px;
      // overflow-y: auto;

      .edit {
        cursor: pointer;
        margin-right: 15px;
      }
      .del {
        cursor: pointer;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }

        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }
}
</style>
